<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="fdfxtrbForm" class="demo-form-inline">

        <el-form-item label="日期:">
          <el-date-picker
              v-model="searchDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <!-- <el-form-item label="日期:">
          <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="formSearch()">查询</el-button>
          <el-button type="success" @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white grid-content">
      <div style="overflow: hidden; ">
        <div class="mytitle">分队分系统日报</div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border>
        <el-table-column align="center" fixed="left" prop="rq" label="日期" width="100px">
        </el-table-column>
        <el-table-column align="center" label="树2队">
          <el-table-column align="center" prop="serZs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="serJs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="serJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="serSh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="serHj" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树8队">
          <el-table-column align="center" prop="sbaZs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="sbaJs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="sbaJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="sbaSh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="sbaHj" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树16队">
          <el-table-column align="center" prop="sslZs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="sslJs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="sslJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="sslSh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="sslHj" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="树101队">
          <el-table-column align="center" prop="sylyZq" label="注气">
          </el-table-column>
          <el-table-column align="center" prop="sylyYq" label="一期">
          </el-table-column>
          <el-table-column align="center" prop="sylyJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="sylyEq" label="二期">
          </el-table-column>
          <el-table-column align="center" prop="sylyHj" label="合计">
          </el-table-column>
        </el-table-column>

        <el-table-column align="center" label="作业区">
          <el-table-column align="center" prop="zyqZs" label="注水">
          </el-table-column>
          <el-table-column align="center" prop="zyqJs" label="集输">
          </el-table-column>
          <el-table-column align="center" prop="zyqJc" label="机采">
          </el-table-column>
          <el-table-column align="center" prop="zyqSh" label="生活">
          </el-table-column>
          <el-table-column align="center" prop="zyqHj" label="合计">
          </el-table-column>
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination align='right'
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5,10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import fdfxtApi from '@/api/sjtb/scgl/fdfxtrb';

export default {
  data() {
    return {
      show:false,//隐藏序列
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      currentPage: 1,//当前页码
      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      searchDate:"",
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [],
      //excel数据
      excelData:[],
      approveStatus:'',
      fdfxtrbForm:{},
      // // table数据总条数
      // tableTotal: 30,
      // // 分页数
      // currentSize: 10,
      // //当前页
      // currentPage: 4
    };
  },
  mounted(){
  },
  methods: {
      /**
      * 查询列表
      */
      async search() {
      // this.pageNo = pageNo; //当前页码
      // this.pageSize = pageSize; //每页显示数量
      //发送查询请求
          // let res = await fdfxtApi.getFdfxtList(this.pageNo,this.pageSize,this.approveStatus,this.searchDate[0],this.searchDate[1]);
          let res = await fdfxtApi.listToFdfxtrb({startDate:this.searchDate[0],endDate:this.searchDate[1]});
          //判断是否成功
          if(res.success){
              console.log(res.data);
              //赋值
              this.tableData = res.data;
              //总数量
              this.total = res.data.length;
          }
      },
      //条件查询
      formSearch(){
          // console.log(this.searchDate);
          this.search();

      },
      //报表导出下载
      download() {
          require.ensure([], async () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
            //复杂表头书写
            //添加表格id
            // var myindex = [];
            // for (var i = 0; i < this.total; i++) {
            //   myindex[i] = i + 1
            // }
            // var newindex = myindex.map(item => {
            //   console.log(item)
            //   return {
            //     index: item
            //   }
            // });

            let res = await fdfxtApi.getFdfxtList({pageNo:1,pageSize:this.total,approveStatus:'',startDate:this.searchDate[0],endDate:this.searchDate[1]});
            if(res.success){
              this.excelData =  res.data.records;
            }
            // console.log('myindex', myindex);
            // console.log('newindex', newindex);
            // //将添加的序号加入到表格中形成新的mergeArr表格
            // let mergeArr = [newindex, this.excelData].reduce((prev, curr) => {
            //   return prev.map((item, index) => {
            //     return Object.assign(item, curr[index]);
            //   });
            // });
            // var result = Object.assign(newindex,this.tableData)
            // console.log('mergeArr', mergeArr);
            // console.log('tableData', this.excelData);

            // const tHeader = ['日期', '姓名', '地址'];
            // // 上面设置Excel的表格第一行的标题
            //一级表头
            const multiHeader = [['日期','树2队','','','','','树8队','','','','','树16队','','','','','树101队','','','','','作业区','','','','']];
            //二级表头
            const header = ['','注水', '集输', '机采', '生活', '合计','注水', '集输', '机采', '生活', '合计','注水', '集输', '机采', '生活', '合计','注气', '一期', '机采', '二期', '合计', '注水', '集输', '机采', '生活', '合计'];
            //表头字段
            const filterVal = ['rq', 'serZs', 'serJs', 'serJc', 'serSh', 'serHj', 'sbaZs', 'sbaJs', 'sbaJc', 'sbaSh', 'sbaHj', 'sslZs', 'sslJs','sslJc','sslSh','sslHj', 'sylyZq', 'sylyYq','sylyJc','sylyEq','sylyHj', 'zyqZs', 'zyqJs','zyqJc','zyqSh','zyqHj'];
            //需要合并的单元格
            const merges = ['A1:A2','B1:F1','G1:K1','L1:P1','Q1:U1','V1:Z1'];
            //表头样式
            let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1'];
            // 上面的index、nickName、name是tableData里对象的属性
            console.log(this.excelData);
            // const list = this.tableData;  //把data里的tableData存到list
            // const data = this.formatJson(filterVal, list);
            const list = this.excelData;
            const data = this.formatJson(filterVal, list);
            console.log(111111);
            console.log(list);
            console.log(data);

            export_json_to_excel({
              //header: tHeader,
              multiHeader:multiHeader,
              header:header,
              merges:merges,
              headerStyle:headerStyle  ,
              data: data,
              filename: '分队分系统日报',
              autoWidth: true,
              bookType: 'xlsx'
            });//"列表excel"  是下载后的表名 可修改
            this.$message.success('导出报表成功！')
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => {
            return filterVal.map(j => v[j])
          })
        },
      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
          console.log(size);
          this.pageSize = size;
          //将每页显示的数量交给成员变量
          this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
          console.log(page);
          this.pageNo = page;
          //调用查询方法
          this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod (index) {
          // index默认在0开始，这里+1
          return index + 1 + (this.pageNo - 1) * this.pageSize
      },
  },

};
</script>


<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: larger;
  padding-left: 45%;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myTime {
  float: right;
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
